<template>
    <el-dialog v-model="printWarehouseLabelVisible" :show-close="false" width="60%" @open="loadFormDataEvent">
        <!-- 标题 -->
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">
                    仓库标签
                    <el-text tag="b" type="primary">请使用10*10cm的标签纸</el-text>
                    --- ESC关闭
                </h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    关闭
                </el-button>
            </div>
        </template>
        <!-- 打印内容 -->
        <div v-if="printWarehouseLabelData.productName !== ''" class="print-content">
            <!-- 打印生产单内容 -->
            <div class="w-full flex justify-around mb-2">
                <!-- 表单 -->
                <table id="print-warehouse-container">
                    <thead class="h-14">
                        <tr>
                            <th colspan="4" class="text-xl">产品标识卡</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="h-14">
                            <th colspan="1">客户</th>
                            <td colspan="3" class="text-xl">{{ printWarehouseLabelData.customerAbbreviation }}</td>
                        </tr>
                        <tr class="h-14">
                            <th>产品名称</th>
                            <td>{{ printWarehouseLabelData.productName }}</td>
                            <th>产品尺寸</th>
                            <td>{{ printWarehouseLabelData.productSize }}</td>
                        </tr>
                        <tr class="h-12">
                            <th>订单号</th>
                            <td>{{ printWarehouseLabelData.orderNo }}</td>
                            <th>订单数量</th>
                            <td>{{ printWarehouseLabelData.orderNumber }}</td>
                        </tr>
                        <tr class="h-12">
                            <th>单托数量</th>
                            <td>{{ warehouseForm.singlePalletQuantity }}</td>
                            <th>托盘数量</th>
                            <td>{{ warehouseForm.pallets }}</td>
                        </tr>
                        <tr class="h-14">
                            <th colspan="1">码放备注</th>
                            <td colspan="3">{{ warehouseForm.storageRemarks }}</td>
                        </tr>
                    </tbody>
                </table>
                <!-- 可变内容 -->
                <el-form
                    :model="warehouseForm"
                    label-width="auto"
                    style="max-width: 600px; display: flex; flex-direction: column; justify-content: space-around"
                >
                    <el-form-item label="托盘总数" required>
                        <el-input-number v-model="warehouseForm.pallets" :min="1" :max="100000000" :step="1" step-strictly />
                    </el-form-item>
                    <el-form-item label="单托数量" required>
                        <el-input-number v-model="warehouseForm.singlePalletQuantity" :min="100" :max="100000000" :step="1" step-strictly />
                    </el-form-item>
                    <el-form-item label="码放备注" required>
                        <el-input v-model="warehouseForm.storageRemarks" type="textarea" :rows="4" placeholder="例：100只/捆，共50捆。" />
                    </el-form-item>
                </el-form>
            </div>
            <!-- 打印按钮 -->
            <el-button plain @click="print">打印</el-button>
        </div>
        <!-- 没有打印内容 -->
        <div v-if="printWarehouseLabelData.productName === ''" class="w-full flex items-center justify-center">
            <el-empty description="没有可有打印的标签。" />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { CircleCloseFilled } from '@element-plus/icons-vue';
import printJS from 'print-js';

/* ******************************暴露给父组件的属性/方法****************************** */
// 打印仓库标签的dialog开关
const printWarehouseLabelVisible = defineModel('printWarehouseLabelVisible', { type: Boolean, required: true });
// 父组件传入的仓库单数据
// 需要打印的仓库数据
interface printWarehouseLabelData {
    customerAbbreviation: string;
    productName: string;
    productSize: string;
    orderNo: string;
    orderNumber: number;
    productionNumber: number;
}
const printWarehouseLabelData = defineModel<printWarehouseLabelData>('printWarehouseLabelData', { required: true });

/* ******************************通用属性/方法****************************** */
// 加载表单数据
const loadFormDataEvent = () => {
    warehouseForm.singlePalletQuantity = printWarehouseLabelData.value.productionNumber;
};
// 仓库单表单
const warehouseForm = reactive({
    // 托盘数量
    pallets: 1,
    // 单托数量
    singlePalletQuantity: 1,
    // 码放备注
    storageRemarks: '50只/捆，共50捆。',
});
// 打印
const print = () => {
    // 获取打印元素
    const printEl = document.getElementById('print-warehouse-container');
    // 如果打印元素不存在，则返回
    if (!printEl) {
        ElMessage.error('打印失败');
        return;
    }
    // 打印标签
    printJS({
        printable: printEl,
        type: 'html',
        style: `table {
            width: 450px;
            border-collapse: collapse;
            border: 2px solid rgb(56, 56, 56);
            font-family: sans-serif;
            letter-spacing: 1px;
            text-align: center;
        }

        th,
        td {
            border: 1px solid rgb(63, 63, 63);
            padding: 8px 10px;
            word-break: break-all;
            overflow-wrap: break-word;
        }
        .h-14 {
            height: 3.5rem;
        }
        .text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
        `,
    });
};
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

table {
    width: 450px;
    border-collapse: collapse;
    border: 2px solid rgb(56, 56, 56);
    font-family: sans-serif;
    letter-spacing: 1px;
    text-align: center;
}

th,
td {
    border: 1px solid rgb(63, 63, 63);
    padding: 8px 10px;
    word-break: break-all;
    overflow-wrap: break-word;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
</style>
